<template>
    <div class="rule-edit">
        <div class="header">
            <p>编辑规则</p>
            <!--<el-button class="link" type="primary">-->
                <!--<router-link to="/msgList" style="color: #fff;">返回</router-link>-->
            <!--</el-button>-->
        </div>
        <div class="main" v-if="title && title != undefined">
            <div class="item">
                <span style="float: left; width: 130px;text-align: right">{{title}}：</span>
                <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="content">
                </el-input>
                <el-button type="primary" @click="handleUpdate" style="vertical-align: top">保存</el-button>
            </div>
        </div>
        <div class="main" v-else>
            <div class="item">
                <span style="float: left; width: 130px;text-align: right">预约规则：</span>
                <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="rule">
                </el-input>
                <el-button type="primary" @click="handleSave1" style="vertical-align: top">保存</el-button>
            </div>
            <div class="item">
                <span style="float: left; width: 130px;text-align: right">菲佣岗位说明：</span>
                <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="desc">
                </el-input>
                <el-button type="primary" @click="handleSave2" style="vertical-align: top">保存</el-button>
            </div>
            <div class="item">
                <span style="float: left; width: 130px;text-align: right">菲佣面试指南：</span>
                <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="direct">
                </el-input>
                <el-button type="primary" @click="handleSave3" style="vertical-align: top">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    export default {
        data() {
            return {
                id: "",
                title: "",
                content: "",
                rule: "",
                desc: "",
                direct: "",
                info: ""
            };
        },
        components:{
            'bg-editor':()=>import('../common/bg-editor.vue')
        },
        watch:{

        },
        created(){
        },
        mounted() {
            this.id = this.$router.currentRoute.query.id;
            this.title = this.$router.currentRoute.query.title ? decodeURIComponent(this.$router.currentRoute.query.title) : "";
            if (this.id) {
                this.getDetail(this.id, (res) => {
                    this.content = res.data.bussData.content
                    if (res.data.bussData.title == "预约规则") {
                        this.rule = res.data.bussData.content
                    }
                    if (res.data.bussData.title == "菲佣岗位说明") {
                        this.desc = res.data.bussData.content
                    }
                    if (res.data.bussData.title == "菲佣面试指南") {
                        this.direct = res.data.bussData.content
                    }
                })
            }
        },
        methods: {
            getDetail(id, callback) {
                let url = CONSTANT.URL.RULE.DETAIL;
                common.requestAjax(url, {}, {id: id}, (res) => {
                    if (res.status == 200) {
                        callback && callback(res)
                    }
                })
            },
            add(title, content) {
                if (title == this.title) {
                    let url = CONSTANT.URL.RULE.UPDATE;
                    common.requestAjax(url, JSON.stringify({id: this.id, title: title, content: content}), {}, (res) => {
                        if (res.status == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg
                            })
                        }
                    })
                } else {
                    let url = CONSTANT.URL.RULE.ADD;
                    common.requestAjax(url, JSON.stringify({title: title, content: content}), {}, (res) => {
                        if (res.status == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg
                            })
                        }
                    })
                }
            },
            handleSave1() {
                if (!this.rule) {
                    this.$message({
                        type: "warning",
                        message: "请填写预约规则"
                    })
                    return false
                }
                this.add("预约规则", this.rule)
            },
            handleSave2() {
                if (!this.desc) {
                    this.$message({
                        type: "warning",
                        message: "请填写菲佣岗位说明"
                    })
                    return false
                }
                this.add("菲佣岗位说明", this.desc)
            },
            handleSave3() {
                if (!this.direct) {
                    this.$message({
                        type: "warning",
                        message: "请填写菲佣面试指南"
                    })
                    return false
                }
                this.add("菲佣面试指南", this.direct)
            },
            handleUpdate() {
                if (!this.content) {
                    this.$message({
                        type: "warning",
                        message: "请填写内容"
                    })
                    return false
                }
                this.add(this.title, this.content)
            }
        }
    }
</script>

<style lang="scss" scoped >
    .rule-edit {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .tip-img{
            font-size: 12px;
            color:red;
        }
        .main {
            // width:500px;
            //max-width: 1500px;
            .item {
                margin-bottom: 20px;
                .el-button {
                     margin: 45px 0 0 20px;
                }
            }

            .el-textarea{
                width: 60%;
            }
            .car-info{
                .car-list{
                    overflow: hidden;
                    .el-form-item{
                        float: left;
                        .el-input,.el-select{
                            width: 150px;
                        }
                    }
                }
            }
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
        }
    }
</style>
<style>
    .distpicker-address-wrapper select{
        margin-right: 20px;
    }
    .panel-heading{
        position: relative!important;
    }
    .note-toolbar{
        z-index: 10!important;
    }
    .uploadShow  .el-upload{display: none;}
</style>

